<template>
  <div class="wrap">
    <div class="title">商家后台管理系统</div>
    <div class="fine">
      <div class="card">
        <div class="title log">找回密码</div>
          <el-form class="form" :model="form" :rules="rules" ref="form" label-width="">
            <el-form-item class="four" size="small" prop="userName" label="">
              <el-input placeholder="账号" v-model="form.userName"></el-input>
            </el-form-item>
            <div class="ymas">
              <el-form-item class="four" size="small" prop="imageCode" label="">
                <el-input placeholder="验证码" v-model="form.imageCode"></el-input>
              </el-form-item>
              <div class="getimg" @click = "init">
                <img :src="form.imag" alt=""/>
              </div>
            </div>
            <div class="mocode">
              <el-form-item class="phonecode" size="small" prop="mobileCode" label="">
                <el-input placeholder="手机验证码" v-model="form.mobileCode"></el-input>
              </el-form-item>
              <div><el-button class="setup" @click="sendcode" type="primary" size="small" :disabled="disabled">{{codeText}}</el-button></div>
            </div>
            <div class="btns">
              <el-button class="setup" @click="gologin" type="primary" size="small">返回登录</el-button>
              <el-button class="setup" @click="next" type="primary" size="small">下一步</el-button>
            </div>
          </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'findPwd',
  data () {
    return {
      disabled: false,
      codeText: '发送验证码',
      form: {
        userName: '',
        imageCode: '',
        imag: '',
        mobileCode: ''
      },
      rules: {
        userName: [
          { required: true, message: '请填写账号！', trigger: 'blur' },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,30}$/, message: '6-30位英文或英文+数字', trigger: 'blur' }
        ],
        imageCode: [
          { required: true, message: '请填写验证码！', trigger: 'blur' }
        ],
        mobileCode: [
          { required: true, message: '请填写手机验证码！', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
    // console.log(this.$store.state)
  },
  methods: {
    init () {
      this.$tkAjax.get(`${this.$config.baseUrl}/user/merchantUser/captcha`).then(res => {
        this.form.imag = 'data:image/png;base64,' + res.data.content
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    gologin () {
      this.$router.push('/login')
    },
    sendcode () {
      this.$tkAjax.post(`${this.$config.baseUrl}/user/merchantUser/sendMobileCode`, {}, {
        params: {
          mobileNo: this.form.userName,
          imageCode: this.form.imageCode,
          pageFlg: 2
        }
      }).then(res => {
        this.$message.success(res.data.content)
        this.disabled = true
        let num = 60
        let setinit = setInterval(() => {
          num--
          this.codeText = `${num}秒后重新获取`
          if (num === 0) {
            this.codeText = '发送验证码'
            this.disabled = false
            clearInterval(setinit)
          }
        }, 1000)
      }).catch(err => {
        console.log(err)
        this.$message.warning(err.data.message)
      })
    },
    next () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let json = {
            userName: this.form.userName,
            imageCode: this.form.imageCode,
            mobileCode: this.form.mobileCode
          }
          this.$tkAjax.post(`${this.$config.baseUrl}/user/merchantUser/verifyMobileNo`, {}, {
            params: json,
            withCredentials: true
          })
            .then(res => {
              this.$message.success(res.data.message)
              //修改密码用的参数userId的值
              this.$store.commit('setContent', res.data.content)
              this.$router.push('/nextstep')
            }).catch(err => {
              console.log(err)
              this.$message.warning(err.data.message)
              this.init()
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scope>
.wrap {
  .title {
    padding: 67px 100px;
    font-family: 'PingFang-SC';
    font-size: 37px;
    color: #4B4B4B;
    line-height: 56px;
  }
  .fine {
    width: 100%;
    height: 616px;
    background-image: url('../../../assets/images/wave.png');
    background-size: 100% 100%;
    .card {
      width: 499px;
      background: #f5f5f5;
      float: right;
      border-radius: 6px;
      margin: 136px 67px;
      .log {
        padding: 0;
        font-size: 28px;
        text-align: center;
        line-height: 44px;
        margin: 13px 0 20px 0;
        font-weight: 546;
      }
      .form {
        text-align: center;
        .four {
          .el-form-item__content {
            .el-form-item__error {
              left: 49px;
            }
            .el-input {
              width: 400px;
              .el-input__inner {
                background-color: #eef9fb;
              }
            }
          }
        }
        .ymas {
          padding: 0 17px;
          display: flex;
          justify-content: space-around;
          .el-form-item__content {
            .el-form-item__error {
              left: 1px;
            }
            .el-input {
              width: 230px;
              .el-input__inner {
                background-color: #eef9fb;
              }
            }
          }
        }
        .mocode {
          display: flex;
          justify-content: space-around;
          .el-form-item__content {
            .el-input {
              .el-input__inner {
                background-color: #eef9fb;
              }
            }
          }
        }
        .btns {
          padding: 10px 0 23px;
        }
        .bigbtn {
          .el-button {
            width: 400px;
            height: 44px;
            font-size: 20px;
            background-color: #74acdf;
          }
        }
        .nius {
          padding: 10px 0;
          display: flex;
          justify-content: space-around;
          .el-button {
            color: #82858B;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
